body{
    font-family: "Montserrat", Arial, Verdana, Geneva, Helvetica, sans-serif;
    background-color: rgba(221, 255, 236, 0.5);
}

header{
    position: sticky;
    display: flex;
    justify-content: space-around;
    background-color: rgb(29, 183, 98);
    color: white;
    font-size: 1.5rem;
}
header img{
    width: 5%;
}


intro{
    text-align: center;
    font-size: 1.5rem;
}


a:link,
a:visited,
a:hover,
a:active {
    color: white;
    text-decoration: none;
    outline: none;
}

ul a:link,
ul a:visited,
ul a:hover,
ul a:active {
    color: black;
    text-decoration: none;
    outline: none;
}

.pc1{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.math1{
    display: flex;
    gap: 10px;
    justify-content: center;
}

label{
    margin-top: 1.5%;
}

#toggle-liste2 ~ .mt {
  display: none;
}

#toggle-liste2:checked ~ .mt {
  display: block;
}


#toggle-liste ~ .pc {
  display: none;
}

#toggle-liste:checked ~ .pc {
  display: block;
}

li{
    margin: 2%;
}

.center{
    font-size: 1.5rem;
    text-align: center;
    
}

li:hover {
  animation: grossissement 0.2s ease-in-out forwards;
}

h4:hover {
  animation: grossissement 0.2s ease-in-out forwards;
}

@keyframes grossissement {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.cache{
    cursor: text;
    color: black;
}

.cache:link,
.cache:visited,
.cache:hover,
.cache:active {
    color: black;
    text-decoration: none;
    outline: none;
}





@media (max-width: 800px) {
  header {
    display: block;
    text-align: center;
  }
.ko{
    padding-top: 10%;

}
  header img{
    width: 65%;
    
}

}